<template>
  <div class="logo">
    <img  width="34px" height="34px" />
    <h1 v-if="!isCollapse">动力港</h1>
  </div>
  <!-- 菜单 -->
  <!-- <el-aside :width="isCollapse ? '64px':'200px'"> -->
    <div class="menu-wrapper" @click="toggleCollapse">||||||</div>
    <el-menu :router="true" :default-active="$route.path" unique-opened :collapse="isCollapse" :collapse-transition="false">
      <Menu v-for="item in menuItems" :key="item.url" :item="item"></Menu>
    </el-menu>
  <!-- </el-aside> -->
</template>

<script setup>
import { ref, onMounted, defineEmits} from "vue";
import { getMenuList } from "@/api/menu";
import { useMenuStore } from '@/stores/menuStore'; 
import Menu from "./MenuItem.vue";
let emit = defineEmits(["is-collapse"]);
const menuItems = ref([]);
let isCollapse = ref(false);
    // 点击按钮，切换菜单的折叠与展开
let toggleCollapse= ()=> {
  isCollapse.value = !isCollapse.value
  
  emit("is-collapse",isCollapse.value)
}
let useMenu = useMenuStore();
const menuListAPI = async () => {
  try {
     await useMenu.fetchMenuList(); 
     const res = useMenu.menuList;       
    if (res) {
      menuItems.value = res
      
    } else {
      const userStore = [];
    }
  } catch (error) {}
};
onMounted(() => {
  menuListAPI();
});
</script>
<style scoped lang="less">
.logo {
  display: flex;
  justify-content: center;
  height: 50px;
  align-items: center;
  padding: 10px 0;
  img {
    margin-left: -10px;
  }
  h1 {
    color: #333;
    margin-left: 10px;
    font-size: 22px;
  }
}
.menu-wrapper {
  // 添加背景颜色
  background-color: #4a5064;
  // 设置文本大小
  font-size: 10px;
  // 设置文本行高
  line-height: 24px;
  // 设置文本颜色
  color: #fff;
  // 设置文本居中
  text-align: center;
  // 设置文本间距
  letter-spacing: 0.2em;
  // 设置鼠标悬浮变小手效果
  cursor: pointer;
}
.el-menu {
  border-right: none;
  overflow: hidden;
}
</style>
